<template>
  <div>
      <input type="text" v-model="inputValue">
      <button @click="handleClick">提交</button>
      <ul>
          <todo-item
              v-for="(item, index) in list"
              :key="index"
              :content="item"
              :index="index"
              @delete="handleDelete"
          ></todo-item>
      </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'
export default {
    components: {
        TodoItem
    },
    data() {
        return {
            inputValue: '',
            list: []
        }
    },
    methods: {
        handleClick() {
            this.list.push(this.inputValue)
            this.inputValue = ''
        },
        handleDelete(index) {
            this.list.splice(index, 1)
        }
    }
}
</script>

<style>

</style>
